<template>
    <div class="container-talentList" @click="jumpDetail">
        <div class="list-top">
            <div class="list-left">
                <div>
                    <img class="list-header" :src="listInfo.headPortrait" />
                </div>
                <div class="list-user">{{listInfo.name}}</div>
                <div class="list-info">
                    <template v-for="(item,idx) in listInfo.territory">
                        <div class="my-type-list" :key="item" v-if="idx<2">{{item}}</div>
                    </template>

                </div>
            </div>
            <div class="list-right">
                <div class="list-info" v-if="listInfo.placeCollege">
                    <span class="info-title">所属学院：</span>
                    <div class="info-words text-nowarp">
                        <template v-for="(item,idx) in JSON.parse(listInfo.placeCollege)">
                            {{item}},
                        </template>
                    </div>
                </div>
                <div class="list-info" v-if="listInfo.placeUnit">
                    <span class="info-title">所属单位：</span>
                    <span class="info-words">{{listInfo.placeUnit}}</span>
                </div>
                <div class="list-info">
                    <span class="info-title">联系方式：</span>
                    <span class="info-words">{{listInfo.phone}}</span>
                </div>
            </div>
        </div>
    </div>
    </div>
</template>

<script lang="ts">
import config from "@/utils/config";
import { Vue, Component, Prop } from "vue-property-decorator";
@Component({
    name: "dom",
    components: {},
})
export default class index extends Vue {
    @Prop({ default: () => {} }) listInfo!: any;
    jumpDetail() {
        window.open(config.clientUrl + "/#/talentDetail?id=" + this.listInfo.id + "&pageType=" + this.listInfo.userType);
    }
}
</script>

<style lang="scss">
.container-talentList:nth-child(2n) {
    margin-right: 0;
}
.container-talentList {
    width: 49%;
    margin-right: 2%;
    box-shadow: 0px 0px 14px 4px rgba(0, 0, 0, 0.1);
    background-color: #fff;
    margin-bottom: 20px;
    border-radius: 8px;
    display: inline-block;
    padding: 10px;

    .list-top {
        display: flex;
        align-items: center;
    }
    .list-left {
        width: 230px;
        flex-shrink: 0;
        text-align: center;
        .type-warning {
            font-size: 12px;
        }
    }
    .list-right {
        flex-grow: 1;
        flex-shrink: 0;
        width: 100%;
    }
    .list-header {
        width: 80px;
        height: 80px;
        border-radius: 110px;
        display: inline-block !important;
    }
    .list-user {
        font-weight: bold;
        font-size: 20px;
        color: #333333;
        margin: 10px 0;
    }
    .list-info {
        margin-bottom: 10px;
    }
    .info-title {
        font-size: 14px;
        color: #82848a;
        display: inline-block;
    }
    .info-words {
        font-size: 14px;
        color: #333;
        display: inline-block;
        vertical-align: top;
        max-width: 200px;
    }
}
</style>
